<template>
	<view class="wrapper article">
		<u-loading-page loadingColor="#e3230e" iconSize="40" :loading="!pageLoading"></u-loading-page>
		<view class="article-tabs">
			<u-tabs
				lineColor="#e3230e"
				lineWidth="90rpx"
				:current="current"
				:itemStyle="{
					height: '80rpx',
					fontSize: '32rpx'
				}"
				:inactiveStyle="{
					color: '#333333'
				}"
				:activeStyle="{
					color: '#e3230e',
					fontWeight: '600'
				}"
				:list="tabList"
				@click="clickTab"></u-tabs>
		</view>
		<view class="article-content">
			<view class="article-list">
				<view class="article-item main-flex">
					<view class="article-item-pic">
						<image class="article-item-pic-img" src=""></image>
					</view>
					<view class="article-item-info main-flex-item main-flex">
						<view class="article-item-title text_line2">社区团购：把便捷实惠的生活 “打包” 带回家</view>
						<view class="article-item-bottom main-flex">
							<view class="article-item-time">2025年10月11日</view>
						</view>
					</view>
				</view>
			</view>
			<!--加载-->
			<view
				v-if="isNull"
				class="null main-flex">
				<u-empty text="~ 没有新鲜咨询哟 ~" icon="/static/images/null.png"></u-empty>
			</view>
			<view
				v-else
				class="more main-flex">
				<uni-load-more :status="status" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { articleList } from "@/api/app_api/index"
import { timeFormat } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 页面加载
	const pageLoading = ref(true)
	
	// tabs
	const current = ref(0)
	const tabList = ref([
		{ status: '', name: '全部', tIndex: 0 },
		{ status: 0, name: '待付款', tIndex: 1 },
		{ status: 1, name: '待发货', tIndex: 2 },
		{ status: 2, name: '待收货已完成', tIndex: 3 },
		{ status: 6, name: '已完成', tIndex: 4 },
		{ status: 7, name: '已完成', tIndex: 5 }
	])
	const clickTab = (e) => {
		type.value = e.status
		searchFirst()
	}
	
	// 列表查询
	const type = ref('')
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		tableList.value = []
		status.value = 'loading'
		isNull.value = false
		getList()
	}
	
	const getList = () => {
		const params = {
			isAsc: 'desc'
		}
		if (type.value || type.value == 0) {
			params.status = type.value
		}
		isLoading.value = true
		articleList(params).then(res => {
			tableList.value = res.data || []
			status.value = 'no-more'
			isLoading.value = false
			// uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
			// uni.hideLoading()
		})
	}
	
	onLoad((option) => {
		searchFirst()
	})
	
</script>

<style lang="scss">
	.article {
		&-tabs {
			position: fixed;
			height: 80rpx;
			width: 100%;
			left: 0;
			background-color: #ffffff;
			z-index: 10;
		}
		&-content {
			padding: 100rpx 20rpx 20rpx;
		}
		&-item {
			height: 200rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			&-pic {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				overflow: hidden;
				&-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
			&-info {
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				height: 100%;
			}
			&-title {
				width: 100%;
				font-size: 32rpx;
				font-weight: 700;
				color: $text-dark;
			}
			&-bottom {
				width: 100%;
			}
			&-time {
				font-size: 24rpx;
				color: $text-light;
				margin-left: auto;
			}
		}
	}
</style>
